<template>
<div>
    <Button type="primary" shape="circle" @click="onAdd">添加数据</Button>
    <Button type="error" shape="circle" @click="onRemove">删除数据</Button>
    <Input v-model="filter.name">
        <Button slot="append" icon="ios-search" @click="onSearch" ></Button>
    </Input>
    <Table border :columns="columns" :data="filter.list" 
    @on-selection-change="onSelectionChange"
    ></Table>  
    <Page :total="filter.total" size="small" show-total show-elevator show-sizer
    @on-change="onChangepage"
    @on-page-size-change="onPageSizeChange"
    ></Page>
    <Modal
        v-model="modal1"
        title="普通的Modal对话框标题">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="姓名" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
            </FormItem>
            <FormItem label="年龄" prop="age">
                <Input v-model="formValidate.age" placeholder="请输入年龄"></Input>
            </FormItem>
            <FormItem label="城市" prop="address">
                <Select v-model="formValidate.address" placeholder="请选择所在地">
                    <Option value="北京市">北京市</Option>
                    <Option value="上海市">上海市</Option>
                    <Option value="深圳市">深圳市</Option>
                </Select>
            </FormItem>
            <FormItem>
                <Input></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
    </Modal>
</div>
    
</template>
<script>
    export default {
        data () {
            return {
                formValidate: {
                    name: '',
                    age: '',
                    address: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    age: [
                        { required: true, message: '年龄不能为空', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: '请选择城市', trigger: 'change' }
                    ]
                },

                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    }, 
                    {
                        title: '姓名',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: '地址',
                        key: 'address'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style:{
                                         marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                          
                                         this.amend(params.row)
                                            
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {

                                           this.remove(params.row._id)
                                        
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                ids:[],
                modal1:false,
                filter:{
                    list:[],
                    total:0,
                    page:1,
                    limit:10,
                    name:''
                }
                
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.formValidate._id && this.formValidate._id.length>0){
                            this.$http.put(`http://localhost:3000/usersXq/data/${this.formValidate._id}`,this.formValidate)
                            .then(res=>{
                            this.$Message.success('提交成功!');
                            this.modal1=false;
                            this.getData();
                            })
                        }else{
                            this.$http.post('http://localhost:3000/usersXq/data',this.formValidate)
                            .then(res=>{
                            this.$Message.success('提交成功!');
                            this.modal1=false;
                            this.getData();
                            })
                        }
                    }

                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            onAdd(){
                this.modal1=true;

                delete this.$data.formValidate._id;
                Object.assign(this.$data.formValidate,this.$options.data().formValidate);
                console.log(this.$data.formValidate);
            },
            onSelectionChange(rows){
                if(rows && rows.length>0){
                    var ids=[];
                    let rowsLen=rows.length;
                    for(let i=0;i<rowsLen;i++){

                        ids.push(rows[i]._id)
                    }
                    this.ids=ids

                }
            },
            onRemove(){
                
                this.$Modal.confirm({
                    title: '确认对话框标题',
                    content: '<p>确认删除数据</p>',
                    onOk: () => {
                        this.$http.post("http://localhost:3000/usersXq/deletes",{ids:this.ids.toString()})
                        .then(res=>{
                            this.getData();
                        })
                    },
                    onCancel: () => {
                       
                    }
                });




            },
            confirm () {
                this.$Modal.confirm({
                    title: '删除数据',
                    content: '<p>确认删除数据</p>',
                    onOk: () => {
                        this.$Message.info('点击了确定');
                    },
                    onCancel: () => {
                        this.$Message.info('点击了取消');
                    }
                });
            },
            amend (row) {
                this.modal1=true;
                Object.assign(this.$data.formValidate,row);
                console.log(this.$data.formValidate,row)

            },
            show (index) {
                this.$Modal.info({
                    title: '用户信息',
                    content: `姓名：${this.filter.list[index].name}<br>年龄：${this.filter.list[index].age}<br>地址：${this.filter.list[index].address}`
                })
            },
            remove (id) {

                this.$Modal.confirm({
                    title: '确认对话框标题',
                    content: '<p>确认删除数据</p>',
                    onOk: () => {


                        this.$http.delete(`http://localhost:3000/usersXq/data/${id}`)
                        .then(res=>{
                            this.$Message.info('删除数据成功');
                            this.getData();
                        });
                    },
                    onCancel: () => {
                       
                    }
                });


            },
            getData(){
                this.$http.post('http://localhost:3000/usersXq/list',this.filter)
                .then(res=>{
                    this.filter.list=res.data.rows;
                    this.filter.total=res.data.total;
                    this.filter.page=res.data.page;
                 })
            },
            onChangepage(page){
                this.filter.page=page;
                this.getData();

            },
            onPageSizeChange(pageSize){
                this.filter.limit=pageSize
                this.getData();
            },
            onSearch(){
                this.getData();
            }
        },
        created(){
            this.getData();
        }
    }
</script>
